<template>
	<div class="content">
		<image class="logo" mode="aspectFit" style="width: 200rpx; height: 200rpx;" src="/static/logo.png"></image>
		<div v-if="!pShow">
			<div class="btn" @click="getUserInfo">
				<uni-icons style="margin-right: 10px;" color="#fff" type="person-filled" size="30"></uni-icons>
				<span>登录/注册</span>
			</div>
			<div class="btn btn2" @click="toIndex">
				<span>不登录，继续浏览-></span>
			</div>
		</div>
		<div v-else>
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
				<uni-icons style="margin-right: 10px;" color="#fff" type="phone-filled" size="28"></uni-icons>
				<span>手机号快捷登录</span>
			</button>
			<div class="ff c mt10">请绑定手机号，才能使用我们提供的完整服务</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			pShow: false,
			list: []
		}
	},
	onLoad() {
		uni.removeStorageSync('token');
	},
	methods: {
		decryptPhoneNumber(e) {
			if (e.detail.code) {
				this.$request({
					url: `/wx/user/getPhoneInfo?code=${e.detail.code}`,
					method: 'get',
				}).then(res => {
					uni.setStorageSync('phone', res.data.phoneNumber);
					uni.switchTab({
						url: '/pages/index/index'
					});
					this.$msg('登录成功');
				})
			} else {
				this.$msg('您取消了手机号授权，请授权手机号使用');
			}
		},
		toIndex() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		getUserInfo() {
			uni.showLoading({ title: '加载中...', mask: true });
			uni.getUserProfile({
				desc: '用于用于完善个人资料',
				success: (res) => {
					let vo = res.userInfo;
					uni.login({
						provider: 'weixin', //使用微信登录
						success: (loginRes) => {
							this.okCb(loginRes.code, vo);
						}
					});
				},
				complete: (e) => {
					uni.hideLoading();
				}
			})
		},
		okCb(code, wxUserInfo) {
			this.$request({
				url: '/wx/user/login',
				data: {
					code, wxUserInfo
				}
			}).then(res => {
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('userInfo', JSON.stringify(res.data));

				this.getUseInfo();
			})
		},
		getUseInfo() {
			this.$request({
				url: '/wx/user/getUseInfo',
				method: 'get',
			}).then(res => {
				let data = res.data;
				if (data.phone) {
					uni.setStorageSync('phone', data.phone);
					uni.switchTab({
						url: '/pages/index/index'
					});
					this.$msg('登录成功');
				} else {
					//没有手机号，授权获取手机号
					this.pShow = true;
				}
			})
		},
	}
}
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100vh;
	overflow: auto;
	background: linear-gradient(180deg, #2E5BCC 0%, rgba(246, 246, 246, 0) 100%);
}

.logo {
	display: inherit;
	margin: 32vh auto 20px;
}

.name {
	text-align: center;
	color: #fff;
	margin: 0 auto 20px;
	font-family: 'Courier New', Courier, monospace;
}

.btn {
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 80%;
	padding: 10px;
	line-height: 30px;
	color: #fff;
	background: #2E5BCC;
	border-radius: 30px;
}

.btn2 {
	margin-top: 20px;
	background: #fff;
	color: #2E5BCC;
}
</style>